<template>
  <jy-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
    <div class="app-container">
      <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-form-item label="清单编号" prop="manifestCode">
          <el-input v-model="queryParams.manifestCode" placeholder="请输入清单编号" clearable @keyup.enter.native="getList" />
        </el-form-item>
        <el-form-item label="清单名称" prop="manifestName">
          <el-input v-model="queryParams.manifestName" placeholder="请输入清单名称" clearable @keyup.enter.native="getList" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form> -->
      <el-table border stripe v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" :selectable="rowSelectable" />
        <el-table-column label="材料编号" align="center" prop="manifestCode" min-width="120" show-overflow-tooltip />
        <el-table-column label="材料名称" align="center" prop="manifestName" min-width="120" show-overflow-tooltip />
        <el-table-column label="型号" align="center" prop="model" min-width="100" show-overflow-tooltip />
        <el-table-column label="规格" align="center" prop="specification" min-width="80" show-overflow-tooltip />
        <el-table-column label="单位" align="center" prop="unit" min-width="80" show-overflow-tooltip />
        <el-table-column label="单价" header-align="center" align="right" prop="manifestPrice" min-width="80"
          show-overflow-tooltip />
        <!-- <el-table-column label="调整额" header-align="center" align="right" prop="adjustments" min-width="80"
          show-overflow-tooltip /> -->
        <el-table-column label="签收数量" align="center" prop="monthPlanPurchaseNumber" min-width="120"
          show-overflow-tooltip />
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button :disabled="multiple" :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </jy-dialog>
</template>

<script>
import { progressDetails } from "@/api/ma/materialMeasureSingle";
export default {
  name: "MaterialMeasureSingleSelect",
  data () {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: false,
      manifestIds: [],
      // 选中数组
      selection: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 材料清单表格数据
      dataList: [],
      // 弹出层标题
      title: "标准清单选择",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        gysId: undefined,
        manifestCode: undefined,
        manifestName: undefined,
      },
    };
  },
  created () {
  },
  methods: {
    init (queryParams, dataList) {
      this.queryParams = queryParams;
      this.getList();
      this.open = true;
      this.manifestIds = dataList.map(item => item.manifestId);
    },

    /** 查询材料清单列表 */
    getList () {
      this.loading = true;
      progressDetails(this.queryParams).then(response => {
        this.dataList = response.data || [];
        this.loading = false;
      });
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.queryParams.manifestCode = undefined;
      this.queryParams.manifestName = undefined;
      this.getList();
    },
    // 判断是否禁选
    rowSelectable (row, index) {
      return !this.manifestIds.includes(row.manifestId);
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      // this.ids = selection.map(item => item.manifestId);
      this.selection = selection;
      this.multiple = !selection.length;
    },
    /** 提交按钮 */
    submitForm () {
      this.$emit('callBack', this.selection);
      this.open = false;
      this.selection = [];
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    reset () {
      this.dataList = [];
    }
  }
};
</script>
